<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力中小企业发展 
+----------------------------------------------------------------------
| Copyright (c) 2017～2024  www.wdadmin.cn    All rights reserved.
+----------------------------------------------------------------------
| 沃德代驾系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn>   www.wdadmin.cn
+----------------------------------------------------------------------
| 组件-订单项目 开发者: 麦沃德科技-半夏 
+---------------------------------------------------------------------- -->

<template>
	<view class="component-order-item" :style="{'--theme-color': themeColor}">
		<view class="item-head flex align-items-center">
			<view class="head-text">{{showData.departure_time}}</view>
			<slot name="header"></slot>
			<view class="head-text flex-item" style="text-align: right;">{{showData.actual_amount}}元</view>
		</view>
		<view class="item-address">
			<view class="address-column flex align-items-center">
				<view class="column-point" style="background: #242629;"></view>
				<view class="column-text flex-item">{{showData.from_address}}</view>
			</view>
			<view class="address-column flex align-items-center">
				<view class="column-point" :style="{background: themeColor}"></view>
				<view class="column-text flex-item">{{showData.to_address}}</view>
			</view>
		</view>
		<view class="item-foot flex justify-content-between align-items-center">
			<view class="foot-label">
				<text v-if="showData.type == 1">实时订单</text>
				<text v-else>预约订单</text>
			</view>
			<slot name="footer"></slot>
		</view>
		<view class="item-mask" v-if="loading">
			<view class="mask-top">
				<view class="top-left"></view>
				<view class="top-right"></view>
			</view>
			<view class="mask-center">
				<view class="center-item"></view>
				<view class="center-item"></view>
			</view>
			<view class="mask-bottom">
				<view class="bottom-left"></view>
				<view class="bottom-right"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	export default {
		name: "componentOrderItem",
		props: ["showData", "loading"],
		computed: {
			...mapState({
				themeColor: state => state.app.themeColor,
			})
		},
	}
</script>

<style lang="scss">
	.component-order-item {
		position: relative;

		.item-head {
			.head-text {
				color: #242629;
				font-size: 28rpx;
				font-weight: 600;
				line-height: 40rpx;
			}
		}

		.item-address {
			margin-top: 32rpx;

			.address-column {
				margin-top: 16rpx;

				&:first-child {
					margin-top: 0;
				}

				.column-point {
					width: 16rpx;
					height: 16rpx;
					border-radius: 50%;
				}

				.column-text {
					margin-left: 16rpx;
					color: #242629;
					font-size: 24rpx;
					font-weight: 600;
					line-height: 34rpx;
				}
			}
		}

		.item-foot {
			margin-top: 16rpx;

			.foot-label {
				color: #FFF;
				font-size: 24rpx;
				font-weight: 600;
				padding: 0 12rpx;
				border-radius: 16rpx;
				background: #353C57;
				height: 48rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.item-mask {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 5;
			background: #FFF;
			display: flex;
			flex-direction: column;

			.mask-top {
				display: flex;
				justify-content: space-between;

				.top-left {
					width: 68%;
					height: 40rpx;
					background: #eee;
				}

				.top-right {
					width: 28%;
					height: 40rpx;
					background: #eee;
				}
			}

			.mask-center {
				margin-top: 32rpx;
				display: flex;
				flex-direction: column;
				row-gap: 16rpx;

				.center-item {
					width: 100%;
					height: 34rpx;
					background: #eee;
				}
			}

			.mask-bottom {
				display: flex;
				justify-content: space-between;
				margin-top: 16rpx;

				.bottom-left {
					width: 32%;
					height: 48rpx;
					background: #eee;
				}

				.bottom-right {
					width: 32%;
					height: 48rpx;
					background: #eee;
				}
			}
		}
	}
</style>